<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">个人实名认证</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示用户个人实名认证信息" />
    </div>
    <div class="ci_des" v-if="!isData">
      <div class="title_personal">身份认证</div>
    </div>
    <div class="ci_des" v-if="!isData">
      <el-form
        style="margin: auto"
        :model="form"
        ref="personFormRef"
        :rules="personFormRefRules"
        label-width="120px"
      >
        <el-form-item label="姓名" prop="personName">
          <el-input v-model.trim="form.personName" />
        </el-form-item>
        <el-form-item label="身份证号" prop="personId">
          <el-input v-model.trim="form.personId" />
        </el-form-item>
        <el-form-item label="身份证正面图片" prop="idCardFront">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            ref="uploadFileCardFront"
            action="#"
            list-type="picture"
            :auto-upload="false"
            :on-change="changeAvatarUploadFront"
            :on-preview="handlePictureCardPreview"
            v-model="form.idCardFront"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽或点击上传文件</div>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg文件，且不超过5M</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面图片" prop="idCardBack">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            ref="uploadFileCardBack"
            action="#"
            :auto-upload="false"
            list-type="picture"
            :on-change="changeAvatarUploadBack"
            :on-preview="handlePictureCardPreview"
            v-model="form.idCardBack"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽或点击上传文件</div>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg文件，且不超过5M</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isLoading"
            >认证</el-button
          >
          <!-- <el-button>Cancel</el-button> -->
        </el-form-item>
        <el-dialog v-model="dialogVisible" class="dialog_img">
          <img
            w-full
            :src="dialogImageUrl"
            alt="Preview Image"
            style="width: 100%"
          />
        </el-dialog>
      </el-form>
    </div>
    <div class="ci_des" v-if="isData">
      <!-- <el-descriptions :column="1" title="身份认证" style="width: 100%">
        <el-descriptions-item label-align="rigth" label="姓名:">{{
          personalInfo.personName
        }}</el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="身份证号码:">{{
          personalInfo.personId
        }}</el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="身份证正面图片:">
          <img class="img_persona" :src="personalInfo.idCardFront" alt="" />
        </el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="身份证反面图片:">
          <img class="img_persona" :src="personalInfo.idCardBack" alt="" />
        </el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="认证审核状态:">{{
          personalInfo.status === "0"
            ? "审核中"
            : personalInfo.status === "1"
            ? "通过认证"
            : personalInfo.status === "2"
            ? "未通过认证"
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="用户公钥:">{{
          personalInfo.userPubKey
        }}</el-descriptions-item>
        <el-descriptions-item label-align="rigth" label="上链证书:">{{
          personalInfo.chainCert
        }}</el-descriptions-item>
      </el-descriptions> -->
      <el-form style="margin: auto" label-width="120px">
        <el-form-item label="姓名:">
          {{ personalInfo.personName }}</el-form-item
        >
        <el-form-item label="身份证号码:">
          {{ personalInfo.personId }}</el-form-item
        >
        <el-form-item label="身份证正面图片:">
          <img class="img_persona" :src="personalInfo.idCardFront" alt=""
        /></el-form-item>
        <el-form-item label="身份证反面图片:">
          <img class="img_persona" :src="personalInfo.idCardBack" alt=""
        /></el-form-item>
        <el-form-item label="认证审核状态:">
          {{
            personalInfo.status === "0"
              ? "审核中"
              : personalInfo.status === "1"
              ? "通过认证"
              : personalInfo.status === "2"
              ? "未通过认证"
              : ""
          }}
        </el-form-item>
        <el-form-item label="用户公钥:">
          {{ personalInfo.userPubKey }}
        </el-form-item>
        <el-form-item label="上链证书:">
          {{ personalInfo.chainCert }}
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { DescriptionBlock } from "../../components/index";
import {
  getPersonalRealName,
  addPersonalRealName,
} from "../../api/attestation";
import store from "@/store";
import { ref, reactive } from "vue";
import { isValidID } from "@/utils/validate";
import { ElMessage } from "element-plus";
const isData = ref(false);
const name = ref("admin");
const personFormRef = ref("form");
// 图片放大属性
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const formData = new FormData();
// 点击放大图片
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};
const form = reactive({
  personName: "",
  personId: "",
  idCardFront: [],
  idCardBack: [],
});
const personalInfo = ref({
  personName: "",
  personId: "",
  idCardFront: "",
  idCardBack: "",
  status: 0,
  userPubKey: "",
  chainPubKey: "",
});
const isLoading = ref(false);
/** 身份证校验规则 */
const validateID = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("身份证不能为空"));
  } else {
    // 校验身份证
    if (!isValidID(value)) {
      rule.message = "请输入正确身份证号";
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 表单校验规则 */
const personFormRefRules = {
  personName: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
    {
      max: 10,
      message: "请输入姓名(10个字符以内)",
      trigger: "blur",
    },
  ],
  personId: [
    {
      required: true,
      validator: validateID,
      message: "请输入身份证号",
      trigger: "blur",
    },
  ],
  idCardFront: [
    {
      required: true,
      message: "请上传身份证国徽面",
      trigger: "blur",
    },
  ],
  idCardBack: [
    {
      required: true,
      message: "请上传身份证人像面",
      trigger: "blur",
    },
  ],
};
const changeAvatarUploadFront = (rawFile, fileList) => {
  if (rawFile.raw.type !== "image/jpeg") {
    ElMessage.error("照片格式只能为jpg!");
    if (form.idCardFront.length <= 0) {
      form.idCardFront = [];
    } else {
      form.idCardFront = form.idCardFront.filter((item) => {
        return item.name !== rawFile.name;
      });
    }
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error("照片大小不能超过 5MB!");
    if (form.idCardFront.length <= 0) {
      form.idCardFront = [];
    } else {
      form.idCardFront = form.idCardFront.filter((item) => {
        return item.name !== rawFile.name;
      });
    }
    return false;
  }
  formData.set("idCardFront", rawFile.raw); //以formData格式传递图片信息
  return true;
};
const changeAvatarUploadBack = (rawFile) => {
  if (rawFile.raw.type !== "image/jpeg") {
    ElMessage.error("照片格式只能为jpg!");
    if (form.idCardBack.length <= 0) {
      form.idCardBack = [];
    } else {
      form.idCardBack = form.idCardBack.filter((item) => {
        return item.name !== rawFile.name;
      });
    }
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error("照片大小不能超过 5MB!");
    if (form.idCardBack.length <= 0) {
      form.idCardBack = [];
    } else {
      form.idCardBack = form.idCardBack.filter((item) => {
        return item.name !== rawFile.name;
      });
    }
    return false;
  }
  formData.set("idCardBack", rawFile.raw); //以formData格式传递图片信息
  return true;
};
const onSubmit = () => {
  personFormRef.value?.validate((valid) => {
    if (valid) {
      isLoading.value = true;
      let parmars = {
        personName: form.personName,
        personId: form.personId,
        idCardBack: formData.get("idCardBack"),
        idCardFront: formData.get("idCardFront"),
      };
      addPersonalRealName(parmars)
        .then((res) => {
          if (res.success) {
            isLoading.value = false;
            ElMessage.success(res.msg || "个人实名认证成功!");
            isData.value = true;
            getPersonalInfo();
          } else {
            isLoading.value = false;
            ElMessage.error(res.msg || "企业认证失败!");
            isData.value = false;
          }
        })
        .catch((err) => {
          isLoading.value = false;
          ElMessage.error(err.msg || "个人实名认证失败!");
          isData.value = false;
        });
    } else {
      return false;
    }
  });
};
const getPersonalInfo = () => {
  getPersonalRealName()
    .then((res) => {
      if (res.success && res.data) {
        isData.value = true;
        personalInfo.value = res.data || {};
      } else {
        isData.value = false;
      }
    })
    .catch((err) => {
      ElMessage.success(err.msg);
      isData.value = false;
    });
};
getPersonalInfo();
</script>
<style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";
[v-cloak] {
  display: none;
}
.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
}
.img_persona {
  width: 100px;
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
:deep .el-descriptions .el-descriptions__label {
  display: inline-block;
  width: 120px;
  text-align: right;
}
// :deep .el-descriptions .el-descriptions__content{
//   word-break: break-all;
// }
</style>
